<template>
    <view class="showMoreGuide">
        <view class="search-bar main-search">
            <u-search placeholder="请输入关键词搜索" v-model="title" @change="changeTitle"></u-search>
        </view>
        <view class="recommend" v-if="title==''">推荐</view>
        <view class="list">
            <view class="list-item" v-for="(i,index) in listData" :key="index">
                <!-- {{i}} -->
                <view class="item-title" @click="clickName(i)">
                    <!-- <image v-if="i.agentAvatar" :src="i.agentAvatar" class="avatar"></image>
                    <image v-else :src="`${picUrl}image/logo.png`" class="avatar"></image> -->
                    <text class="name">{{i.title}}</text>
                    <!-- <view class="item1-right">
                        <text>{{i.proportion}}%</text>
                        <image src="/static/image/public/arrowRight.png" mode="widthFix" class="right-arrow"></image>
                    </view> -->
                </view>
            </view>
        </view>
        <!-- <empty :tipText="tipText" v-show="moreData == 0"></empty> -->
    </view>
</template>

<script>
// import empty from '@/components/empty/empty.vue';
export default {
    data() {
        return {
            listData: [],
            title: ''
        }
    },
    onLoad(option) {
        // this.gradeId = option.gradeId
        this.getData();
    },
    // 下拉刷新回调函数
    onPullDownRefresh() {
        this.listQuery.pageNum = 1;
        this.listQuery.agentName = '';
        this.getData();
    },
    // 上拉加载更多
    onReachBottom() {
        this.listQuery.pageNum++;
        this.getData()
    },
    methods: {
        back() {
            uni.navigateBack({});
        },
        openPage(url) {
            uni.navigateTo({
                url
            })
        },
        // 搜索
        search(res) {
            // this.listQuery.pageNum = 1;
            this.getData();
        },
        // 取消搜索
        cancel() {
            // this.listQuery.pageNum = 1;
            // this.listQuery.agentName = '';
            this.getData();
        },
        // 获取列表
        getData() {
            this.$asynApi.guideAllListApi({
                highFrequency: this.title ? '' : 1,
                title: this.title
            }).then(res => {
                this.listData = res.data;
                uni.stopPullDownRefresh();
            })
        },
        changeTitle(e) {
            this.title = e
            this.getData();
        },
        clickName(item) {

            let pages = getCurrentPages();
            // 获取上一个页面
            let prevPage = pages[pages.length - 2];
            // 设置数据
            prevPage.setData({
                // 这里的key需要和上一页的data中的属性名一致
                serviceGuideName: item.title
            });
            // 返回上一页
            uni.navigateBack();
        },
    }
}
</script>

<style lang="scss" scoped>
.showMoreGuide {
        padding: 20rpx 30rpx;
    .recommend{
        padding: 20rpx 0 0 0;
        font-size: 26rpx;
        color: #999;
    }
    .list-item {
        margin-top: 20rpx;
        background-color: white;
        padding: 20rpx 0rpx;
    }
    .item-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
    }
    .name {
        flex: 4;
        margin-left: 20rpx;
    }
    .right-arrow {
        width: 40rpx;
        vertical-align: text-top;
    }

    .operate {
        border-top: 1px solid #f1f1f1;
        margin-top: 20rpx;
        padding-top: 20rpx;
    }
    .operate-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .btn {
        flex: 1;
        margin-left: 10rpx;
    }
    .operate-btn .btn:first-child {
        margin-left: 0;
    }

    .margin10 {
        margin-top: 10rpx;
    }
    .margin-left10 {
        margin-left: 10rpx;
    }
}
</style>
